import React, { useEffect, useState } from 'react';
import * as echarts from 'echarts'
import service from '../api'


function EchartTwo(props) {
    const [pieData, setPieData] = useState([])
    var myChartTwo = null
    useEffect(() => { }, [pieData])
    var requestdata = async () => {
        var res = await service.data.user_simpleData()

        var pie = res.data.data.map((item) => {

            return { value: item.val, name: item.x }
        })

        setPieData(pie)
        myChartTwo.setOption({
            tooltip: { triggerOn: "mousemove", },
            series: [
                {
                    type: 'pie',
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: pie
                }
            ]
        })
    }

    useEffect(() => {
        requestdata()
        myChartTwo = echarts.init(document.getElementById('echarttwo') || document.body);
        myChartTwo.setOption({
            tooltip: { triggerOn: "mousemove", },
            series: [
                {
                    type: 'pie',
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: pieData
                }
            ]
        })

    }, [])
    return (
        <div className='echarttwo-box'>
            <div id="echarttwo" style={{ height: 360, width: 720, marginBottom: 50 }}></div>
        </div>
    );
}

export default EchartTwo;